<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/StoresSystem' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>我的订单</el-breadcrumb-item>
      <!-- <el-breadcrumb-item :to="{ path: '/StoresSystem/FinishedGoodsAdd' }">新增库存</el-breadcrumb-item> -->
      <!-- <el-breadcrumb-item :to="{ path: '/StoresSystem/' }">上架商品</el-breadcrumb-item> -->
    </el-breadcrumb>

    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label">
          <i class="el-icon-date"></i> 有效订单
        </span>
        <el-table
          :data="ordersData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase())||data.price.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%"
          height="360px"
        >
          <el-table-column label="商品编号" prop="_id" width="220%"></el-table-column>
          <el-table-column label="商品名称" prop="name"></el-table-column>
          <el-table-column label="商品价格" prop="price"></el-table-column>
          <el-table-column label="商品数量" prop="num"></el-table-column>
          <el-table-column label="商品图片">
            <template slot-scope="scope">
              <img class="studentsImage" :src="scope.row.imagePath" />
            </template>
          </el-table-column>
          <el-table-column label="买家地址" prop="address"></el-table-column>
          <el-table-column label="店铺名称" prop="shopsId.name"></el-table-column>
          <el-table-column align="right">
            <template slot="header" slot-scope="scope">
              <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
            </template>
            <template slot-scope="scope">
              <el-button size="mini" @click="updateOrders(scope.row)">修改订单</el-button>

              <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                  <el-form-item label="姓名：">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="数量：">
                    <el-input v-model="form.num" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="价格：">
                    <el-input v-model="form.price" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="地址：">
                    <el-input v-model="form.address" autocomplete="off"></el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="close">取 消</el-button>
                  <el-button type="primary" @click="updateOrdersAsync(form._id)">确 定</el-button>
                </div>
              </el-dialog>
              <el-button :plain="true" size="mini" type="danger" @click="deletOrdersAsync(scope.row)">取消订单</el-button>

<!-- <el-button size="mini" type="danger" @click="deletOrdersAsync(scope.row)">取消订单</el-button> -->
              <el-button size="mini" @click="shippedOrdersAsync(scope.row)">商家发货</el-button>
              <el-button size="mini" @click="delayedOrdersAsync(scope.row)">延长发货</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
                <el-pagination
                  @size-change="handleSizeChange1"
                  @current-change="handleCurrentChange1"
                  :current-page="pageData.currentPage"
                  :page-sizes="[3, 4, 5, 7]"
                  :page-size="pageData.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pageData.total"
                ></el-pagination>
              </div>
      </el-tab-pane>
      <el-tab-pane label="失效订单">
        <el-table
          :data="ordersLoseData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase())||data.price.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%"
          height="360px"
        >
          <el-table-column label="商品编号" prop="_id" width="220%"></el-table-column>
          <el-table-column label="商品名称" prop="name"></el-table-column>
          <el-table-column label="商品价格" prop="price"></el-table-column>
          <el-table-column label="商品数量" prop="num"></el-table-column>
          <el-table-column label="商品图片">
            <template slot-scope="scope">
              <img class="studentsImage" :src="scope.row.imagePath" />
            </template>
          </el-table-column>
          <el-table-column label="买家地址" prop="address"></el-table-column>
          <el-table-column label="店铺名称" prop="shopsId.name"></el-table-column>
          <el-table-column align="right">
            <template slot="header" slot-scope="scope">
              <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
            </template>
            <template slot-scope="scope">
              <el-button size="mini" @click="updateOrders(scope.row)">修改订单</el-button>

              <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                  <el-form-item label="姓名：">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="数量：">
                    <el-input v-model="form.num" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="价格：">
                    <el-input v-model="form.price" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="地址：">
                    <el-input v-model="form.address" autocomplete="off"></el-input>
                  </el-form-item>
                  
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="close">取 消</el-button>
                  <el-button type="primary" @click="updateOrdersAsync(form._id)">确 定</el-button>
                </div>
              </el-dialog>

              <el-button size="mini" type="danger" @click="deletOrdersAsync(scope.row)">重新购买</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
                <el-pagination
                  @size-change="handleSizeChange2"
                  @current-change="handleCurrentChange2"
                  :current-page="pageData2.currentPage"
                  :page-sizes="[3, 4, 5, 7]"
                  :page-size="pageData2.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pageData2.total"
                ></el-pagination>
              </div>
      </el-tab-pane>
      <el-tab-pane label="已发货">
        <el-table
          :data="ordersshippedData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase())||data.price.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%"
          height="360px"
        >
          <el-table-column label="商品编号" prop="_id" width="220%"></el-table-column>
          <el-table-column label="商品名称" prop="name"></el-table-column>
          <el-table-column label="商品价格" prop="price"></el-table-column>
          <el-table-column label="商品数量" prop="num"></el-table-column>
          <el-table-column label="商品图片">
            <template slot-scope="scope">
              <img class="studentsImage" :src="scope.row.imagePath" />
            </template>
          </el-table-column>
          <el-table-column label="买家地址" prop="address"></el-table-column>
          <el-table-column label="店铺名称" prop="shopsId.name"></el-table-column>
          <el-table-column align="right">
            <template slot="header" slot-scope="scope">
              <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
            </template>
            <template slot-scope="scope">
              <el-button size="mini" @click="updateOrders(scope.row)">修改订单</el-button>

              <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                  <el-form-item label="姓名：">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="数量：">
                    <el-input v-model="form.num" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="价格：">
                    <el-input v-model="form.price" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="地址：">
                    <el-input v-model="form.address" autocomplete="off"></el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="close">取 消</el-button>
                  <el-button type="primary" @click="updateOrdersAsync(form._id)">确 定</el-button>
                </div>
              </el-dialog>

              <!-- <el-button size="mini" type="danger" @click="deletOrdersAsync(scope.row)">取消订单</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
                <el-pagination
                  @size-change="handleSizeChange3"
                  @current-change="handleCurrentChange3"
                  :current-page="pageData3.currentPage"
                  :page-sizes="[3, 4, 5, 7]"
                  :page-size="pageData3.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pageData3.total"
                ></el-pagination>
              </div>
      </el-tab-pane>
      <el-tab-pane label="延长收货">
        <el-table
          :data="ordersdelayedData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase())||data.price.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%"
          height="360px"
        >
          <el-table-column label="商品编号" prop="_id" width="220%"></el-table-column>
          <el-table-column label="商品名称" prop="name"></el-table-column>
          <el-table-column label="商品价格" prop="price"></el-table-column>
          <el-table-column label="商品数量" prop="num"></el-table-column>
          <el-table-column label="商品图片">
            <template slot-scope="scope">
              <img class="studentsImage" :src="scope.row.imagePath" />
            </template>
          </el-table-column>
          <el-table-column label="买家地址" prop="address"></el-table-column>
          <el-table-column label="店铺名称" prop="shopsId.name.name"></el-table-column>

          <el-table-column align="right">
            <template slot="header" slot-scope="scope">
              <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
            </template>
            <template slot-scope="scope">
              <el-button size="mini" @click="updateOrders(scope.row)">修改订单</el-button>

              <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                  <el-form-item label="姓名：">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="数量：">
                    <el-input v-model="form.num" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="价格：">
                    <el-input v-model="form.price" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="地址：">
                    <el-input v-model="form.address" autocomplete="off"></el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="close">取 消</el-button>
                  <el-button type="primary" @click="updateOrdersAsync(form._id)">确 定</el-button>
                </div>
              </el-dialog>

              <el-button size="mini" type="danger" @click="deletOrdersAsync(scope.row)">取消订单</el-button>
              <el-button size="mini" @click="shippedOrdersAsync(scope.row)">商家发货</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
                <el-pagination
                  @size-change="handleSizeChange4"
                  @current-change="handleCurrentChange4"
                  :current-page="pageData4.currentPage"
                  :page-sizes="[3, 4, 5, 7]"
                  :page-size="pageData4.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pageData4.total"
                ></el-pagination>
              </div>
      </el-tab-pane>
    </el-tabs>
    
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers(
  "orders"
);
export default {
  data() {
    return {
      search: "",
      isshow: true
    };
  },
  computed: {
    ...mapState([
      "ordersData",
      "form",
      "dialogFormVisible",
      "hide",
      "deletOrders",
      "addData",
      "ordersLoseData",
      "ordersshippedData",
      "ordersdelayedData",
      "pageData",
      "pageData2",
      "pageData3",
      "pageData4",
      'shopsData'
    ])
  },
  created() {
    this.getOrdersAsync();
    this.getOrdersLoseAsync();
    this.getOrdersshippedAsync();
    this.getOrdersdelayedAsync();
  },
  methods: {
    ...mapActions([
      "getOrdersAsync",
      "updateOrdersAsync",
      "deletOrdersAsync",
      "addOrdersAsync",
      "getOrdersLoseAsync",
      "getOrdersshippedAsync",
      "getOrdersdelayedAsync",
      "shippedOrdersAsync",
      "delayedOrdersAsync",
      'handleSizeChange1',
      'handleCurrentChange1',
      'handleSizeChange2',
      'handleCurrentChange2',
      'handleSizeChange3',
      'handleCurrentChange3',
      'handleSizeChange4',
      'handleCurrentChange4',
    ]),
    ...mapMutations(["updateOrders", "close"]),
    
  }
};
</script>

<style>

.block .el-pagination{
  height: 20px !important;
  padding-top: 10px;
}

.el-tabs__nav-scroll {
  height: 40px;
  line-height: 40px;
}
.el-tabs__nav-scroll div {
  height: 100%;
}
.el-breadcrumb {
  padding-left: 25px;
  height: 30px;
}
img {
  height: 50px;
  width: 50px;
}
#box {
  height: 200px;
  width: 420px;
}
#box ul {
  float: left;
}
#box li {
  height: 25px;
  width: 200px;
  list-style: none;
}

.el-tabs__nav {
  height: 100px !important;
}

.has-gutter tr th {
  height: 50px !important;
}

.el-table__header-wrapper .has-gutter tr th {
  line-height: 20px;
}

.el-tabs__item {
  height: 100px !important;
}

.el-table_1_column_13 .cell img{
  width: 50px !important;
  height: 50px !important;
}
.el-table_2_column_13 .cell img{
  width: 50px !important;
  height: 50px !important;
}
.el-table_3_column_13 .cell img{
  width: 50px !important;
  height: 50px !important;
}
.el-table_4_column_13 .cell img{
  width: 50px !important;
  height: 50px !important;
}
</style>